<template>
    <div class="box">
        <h3>Child组件</h3>
        <div>父组件传的字符串: {{ str }}</div>
        <div>父组件传的对象-名字: {{ obj.name }}</div>
        <div>父组件传的对象-消息: {{ obj.msg }}</div>
        <button @click="changeStr">修改str值</button>
        <button @click="changeObj">修改Obj值</button>
        <button @click="changeObjProps">修改Objs属性值</button>
        <br>
        <br>
        <button @click="str = '我爱你,高圆圆'">直接修改str值</button>
        <button @click="obj = { name: '谢广坤' }">直接修改Obj值</button>
        <button @click="obj.name = '谢萌'">直接修改Objs属性值</button>
    </div>
</template>

<script>
export default {
    name: "Child",
    // 1. 数组形式接参
    // props: ['str', 'obj'],
    // 2. 对象形式接参
    // props: {
    //     str: String,
    //     obj: Object,
    // }
    // 3. 配置对象
    props: {
        str: {
            type: String,
            // required: true,
            default: '哈哈'
        },
        obj: {
            type: Object,
            default() {
                return {
                    name: '刘能'
                }
            }
        },
        changeStr: {
            type: Function
        },
        changeObj: {
            type: Function
        },
        changeObjProps: {
            type: Function
        },
    }
}
</script>

<style scoped>

</style>